<%--
  Created by IntelliJ IDEA.
  User: swg
  Date: 2017/10/2
  Time: 16:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/includes.jsp" %>
<jsp:include page="/WEB-INF/jsp/head.jsp">
    <jsp:param name="pageName" value="userList"/>
</jsp:include>
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>用户列表</h3>
            </div>

            <div class="title_right">
                <div class="col-md-4 col-sm-7 col-xs-12 form-group pull-right top_search">
                    <div class="input-group">
                        <input class="form-control" id="textInput" type="search" placeholder="根据用户名查询..."
                               value="">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id = "queryButton">查询</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="row">
            <div class="clearfix"></div>
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                    <div class="x_title">
                        <ul class="nav navbar-right panel_toolbox">
                            <li>
                                <a href="${pageContext.request.contextPath}/userManager/addUser" role="button"
                                   data-toggle="tooltip" data-placement="top" title="添加用户">
                                    添加用户
                                    <i class="fa fa-plus-circle"></i>
                                </a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/userManager/batchImportUser" role="button"
                                   data-toggle="tooltip" data-placement="top" title="批量导入用户">
                                    批量导入用户
                                    <i class="fa fa-cloud-upload"></i>
                                </a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="table-responsive">
                            <table class="table table-striped jambo_table bulk_action">
                                <thead>
                                <tr class="headings">
                                    <th class="column-title" style="text-align:center;">头像</th>
                                    <th class="column-title" style="text-align:center;">用户名</th>
                                    <th class="column-title" style="text-align:center;">性别</th>
                                    <th class="column-title" style="text-align:center;">邮箱</th>
                                    <th class="column-title" style="text-align:center;">角色</th>
                                    <th class="column-title" style="text-align:center;">上午打卡</th>
                                    <th class="column-title" style="text-align:center;">下午打卡</th>
                                    <th class="column-title" style="text-align:center;">操作</th>
                                </tr>
                                </thead>
                                <tbody id="tableBody">

                                </tbody>
                            </table>
                            <%--显示多少页--%>
                            <div class="pagination-section">
                                <div class="pull-left">
                                    每页显示&emsp;
                                    <select id="pageSize" onchange="changePageSize(this);">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="40">40</option>
                                    </select>
                                    &emsp;条记录,<span id="pageCount" style=""></span>
                                </div>
                                <div class="pull-right">
                                    <nav>
                                        <div id="bottomTab"/>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="pull-right">
        <i class="fa fa-copyright"></i> 2017 蜗牛生活 版权所有
    </div>
    <div class="clearfix"></div>
</footer>

</div>
<script>
    var PAGESIZE = 10;
    function changePageSize(_obj) {
        PAGESIZE = $(_obj).val();
        buildTable("",1,PAGESIZE)
    }

    var options = {
        currentPage: 1,  //当前页数
        totalPages: 10,  //总页数，这里只是暂时的，后头会根据查出来的条件进行更改
        size:"normal",
        alignment:"center",
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first":
                    return "第一页";
                case "prev":
                    return "前一页";
                case "next":
                    return "后一页";
                case "last":
                    return "最后页";
                case "page":
                    return  page;
            }
        },
        onPageClicked: function (e, originalEvent, type, page) {
            var name = $("#textInput").val(); //取内容
            buildTable(name,page,PAGESIZE);//默认每页最多10条
        }
    }

    //获取当前项目的路径
    var urlRootContext = (function () {
        var strPath = window.document.location.pathname;
        var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
        return postPath;
    })();

    //生成表格
    function buildTable(name,pageNumber,pageSize,currentPageNumber) {
        var url =  "${pageContext.request.contextPath}/userInfo/userList"; //请求的网址
        var reqParams = {'name':name, 'pageNumber':pageNumber,'pageSize':pageSize};//请求数据
        $(function () {
            $.ajax({
                type:"POST",
                url:url,
                data:reqParams,
                async:false,
                dataType:"json",
                success: function(data){
                    $("#pageCount").empty();
                    $("#pageCount").append("共"+data.data.pages+"页")
                    if(data) {
                        var newoptions = {
                            currentPage: currentPageNumber,  //当前页数
                            totalPages: data.data.pages==0?1:data.data.pages,  //总页数
                            size:"normal",
                            alignment:"center",
                            itemTexts: function (type, page, current) {
                                switch (type) {
                                    case "first":
                                        return "第一页";
                                    case "prev":
                                        return "前一页";
                                    case "next":
                                        return "后一页";
                                    case "last":
                                        return "最后页";
                                    case "page":
                                        return  page;
                                }
                            },
                            onPageClicked: function (e, originalEvent, type, page) {
                                var name = $("#textInput").val(); //取内容
                                var currentPageNumber ;
                                switch (type) {
                                    case "prev":
                                        currentPageNumber = page + 1;
                                        break;
                                    case "next":
                                        currentPageNumber = page - 1;
                                        break;
                                }
                                buildTable(name,page,PAGESIZE,currentPageNumber);//默认每页最多10条
                            }
                        }
                        $('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新设置总页面数目
                        var dataList = data.data.dataList;
                        $("#tableBody").empty();//清空表格内容
                        if (dataList.length > 0 ) {
                            $(dataList).each(function(){//重新生成
                                $("#tableBody").append('<tr>' +
                                    '<td style="text-align:center;">' + ' <img Style="width:30px;" src="${domain}'+this.headImageUrl + '"> </td>' +
                                    '<td style="text-align:center;font-size:15px;">' + this.username + '</td>' +
                                    '<td style="text-align:center;font-size:15px;">' + this.sex +'</a>' + '</td>' +
                                    '<td style="text-align:center;font-size:15px;">' + this.phoneNumber + '</td>' +
                                    '<td style="text-align:center;font-size:15px;">' + this.roleId + '</td>'+
                                    '<td style="text-align:center;font-size:15px;">' + this.createPersonName + '</td>'+
                                    '<td style="text-align:center;font-size:15px;">' + new Date(this.createDate).toLocaleDateString() + '</td>'+
                                    '<td style="text-align:center;">'
                                    <shiro:hasRole name="admin">
                                        + '<a style="font-size:15px;" href="${pageContext.request.contextPath}/userManager/modifyUser/'+this.id +'">'+ '修改</a>&nbsp;&nbsp;' +
                                        '<a style="font-size:15px;" href="${pageContext.request.contextPath}/userManager/deleteUser/'+this.id +'" onclick="return del()">'+ '删除</a>&nbsp;&nbsp;'
                                    </shiro:hasRole>
                                    + '<a style="font-size:15px;" href="${pageContext.request.contextPath}/userManager/showUserInfo/'+this.id +'">'+ '详情</a>&nbsp;&nbsp;'
                                     +   '</td>&nbsp;&nbsp;'
                                    + '<tr>');

                            });
                        } else {
                            $("#tableBody").append('<tr><th colspan ="8"><center>查询无数据</center></th></tr>');
                        }
                    }else{
                        alert("----"+data.status);
                    }
                },
                error: function(e){
                    alert("查询失败");
                }
            });
        });
    }

    //渲染完就执行
    $(function() {
        //生成底部分页栏

       $('#bottomTab').bootstrapPaginator(options);

        buildTable("",1,10);//默认空白查全部

        //创建结算规则
        $("#queryButton").bind("click",function(){
            var name = $("#textInput").val();
            buildTable(name,1,PAGESIZE);
        });
    });

    function del() {
        var msg = "该操作不可恢复，请确认！！";
        if (confirm(msg)==true){
            return true;
        }else{
            return false;
        }
    };

</script>
<script src="${pageContext.request.contextPath}/statics/bootstrap3/jquery-2.1.4.min.js"></script>
<%--<script src="${pageContext.request.contextPath}/statics/bootstrap3/js/bootstrap.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/statics/bootstrap3/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/statics/bootstrap3/js/bootstrap-paginator.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/frame/gentelella/js/custom-msms.js"></script>
</body>
</html>


